@extends('shop::layouts.master')
@section('title')
    首页
@endsection
@section('tab')
    <div class="layui-fluid">
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn layui-btn-normal">周</button>
            <button class="layui-btn layui-btn-normal">月</button>
            <button class="layui-btn layui-btn-normal">半年</button>

        </div>

        <div class="layui-row layui-col-space15">

            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"></div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="jc_njyy_num" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"></div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="jc_profit" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">用户来源</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="main3" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">硬盘使用量</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="main4" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script type="text/javascript">

        $(function()
        {
            chart_jc_njyy_num();//车辆检测-图表
            chart_jc_profit();//收益-图表
        });


        /*图表数据*/
        function chart_data() {
            return {!! $arr_data !!};
        }

        /*车辆检测-图表*/
        function chart_jc_njyy_num() {
            // 基于准备好的dom，初始化echarts实例
            var jc_njyy_num_chart = echarts.init(document.getElementById('jc_njyy_num'));
            var chart_name = '车辆检测';
            var arr_data = chart_data();
            var x_date = arr_data.date;// X轴 日期
            var y_num_yuyue = arr_data.num;// Y轴 预约单
            var y_num_zijia = arr_data.zijia_num;// Y轴 自驾
            var y_num_daijia = arr_data.daijia_num;// Y轴 代驾

            //
            // var jc_cate = arr_data.cate;
            // var jc_date = arr_data.date;
            // var jc_num = arr_data.num;
            // var jc_pay_price = arr_data.pay_price;
            // var jc_profit = arr_data.profit;
            // var jc_refund_price = arr_data.refund_price;
            // var jc_total = arr_data.total;

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: chart_name
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['预约单', '自驾', '代驾']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: x_date
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '预约单',
                        type: 'line',
                        stack: '数量',
                        data: y_num_yuyue
                    },
                    {
                        name: '自驾',
                        type: 'line',
                        stack: '数量',
                        data: y_num_zijia
                    },
                    {
                        name: '代驾',
                        type: 'line',
                        stack: '数量',
                        data: y_num_daijia
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            jc_njyy_num_chart.setOption(option);
        }

        /*收益-图表*/
        function chart_jc_profit() {
            // 基于准备好的dom，初始化echarts实例
            var jc_njyy_num_chart = echarts.init(document.getElementById('jc_profit'));
            var chart_name = '收益';
            var arr_data = chart_data();
            var x_date = arr_data.date;// X轴 日期
            var y_num_in = arr_data.pay_price;// Y轴 收入
            var y_num_out = arr_data.refund_price;// Y轴 退款
            var y_num_profit = arr_data.profit;// Y轴 收益

            //
            // var jc_cate = arr_data.cate;
            // var jc_date = arr_data.date;
            // var jc_num = arr_data.num;
            // var jc_pay_price = arr_data.pay_price;
            // var jc_profit = arr_data.profit;
            // var jc_refund_price = arr_data.refund_price;
            // var jc_total = arr_data.total;

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: chart_name
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['收入', '退款', '收益']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: x_date
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '收入',
                        type: 'line',
                        stack: '总量',
                        data: y_num_in
                    },
                    {
                        name: '退款',
                        type: 'line',
                        stack: '总量',
                        data: y_num_out
                    },
                    {
                        name: '收益',
                        type: 'line',
                        stack: '总量',
                        data: y_num_profit
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            jc_njyy_num_chart.setOption(option);
        }








        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '5%',
                right: '2%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'PV',
                    type:'line',
                    areaStyle: {normal: {}},
                    data:[120, 132, 101, 134, 90, 230, 210],
                    smooth: true
                },
                {
                    name:'UV',
                    type:'line',
                    areaStyle: {normal: {}},
                    data:[45, 182, 191, 234, 290, 330, 310],
                    smooth: true,

                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main3'));

        // 指定图表的配置项和数据
        var option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main4'));

        // 指定图表的配置项和数据
        var option = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '硬盘使用量',
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    data: [{value: 88, name: '已使用'}]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
@endsection

@section('tab_js')


@endsection




